/** 初次表格渲染，添加商品
 * Dary
 * 2020-05-13
 */

const tbody = document.querySelector('#tbody-shop')

// 虽然代码在js里，但是请求是在index.html发出的，所以路径要以index.html为出发点
getData()
function getData () {
    utils.fetch('./api/shop/select.php').then(resp => {
        console.log(resp)
        if (resp.code === 200) {
            const { list } = resp.body
            tbody.innerHTML = list.reduce((html, shop, index) => {
                // reduce的第三个参数就是索引
                html += `
                <tr data-id="${shop.id}">
                    <td>${index+1}</td>
                    <td><span>${shop.name}</span><input class="input-name" type="text"></td>
                    <td><span>${shop.price}</span><input class="input-price" type="text"></td>
                    <td><span>${shop.num}</span><input class="input-num" type="text"></td>
                    <td>
                        <button class="btn btn-xs btn-info btn-edit">编辑</button>
                        <button class="btn btn-xs btn-danger btn-del">删除</button>
                        <button class="btn btn-xs btn-success btn-ok">确定</button>
                        <button class="btn btn-xs btn-warning btn-cancel">取消</button>
                    </td>
                </tr>
                `
                return html
            }, '')
        }
    })
}


// 添加商品功能
const addBtn = document.querySelector('#btn-add'),
      inputName = document.querySelector('#inputName'),
      inputPrice = document.querySelector('#inputPrice'),
      inputNum = document.querySelector('#inputNum'),
      msgWrap = document.querySelector('#msg-wrap')

utils.on(addBtn, 'click', () => {
    const name = inputName.value,
          price = inputPrice.value,
          num = inputNum.value

    // 把三个数据发送后端
    utils.fetch('./api/shop/add.php', { name, price, num }).then(resp => {
        console.log(resp)
        msgWrap.innerHTML = resp.msg
        if (resp.code === 200) {
            msgWrap.classList.add('text-success')
            setTimeout(() => {
                // 提示信息清空，移除class
                msgWrap.innerHTML = ''
                msgWrap.classList.remove('text-success')
                // 隐藏模态框
                $('#addModal').modal('hide')
                // 重新请求一次数据渲染表格
                getData()
            }, 1500)
        } else {
            msgWrap.classList.add('text-danger')
            setTimeout(() => {
                msgWrap.innerHTML = ''
                msgWrap.classList.remove('text-danger')
            }, 1500)
        }
    })
})

$('#addModal').on('hidden.bs.modal', function (e) {
    console.log('hide')
    // 只要模态框隐藏这个事件就会除法，这个事件是来自于bootstrap自定义的事件
    inputName.value = inputNum.value = inputPrice.value = ''
})